Package-level declarations
Types
Link copied to clipboard
data class StylishCommandItem(val label: String, val onSelect: () -> Unit, val icon: @Composable () -> Unit? = null, val keywords: List<String> = emptyList(), val enabled: Boolean = true)
One selectable entry of a StylishCommandPalette.
Functions
Link copied to clipboard
fun StylishAlertDialog(onDismissRequest: () -> Unit, modifier: Modifier = Modifier, icon: @Composable () -> Unit? = null, title: @Composable () -> Unit? = null, text: @Composable () -> Unit? = null, confirmButton: @Composable () -> Unit, dismissButton: @Composable () -> Unit? = null, containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.connectedCornerRadius), tonalElevation: Dp = 1.dp, properties: DialogProperties = DialogProperties(usePlatformDefaultWidth = true))
A modal alert dialog that prompts the user for a decision, wrapping the Material 3 AlertDialog with Stylish defaults.
Link copied to clipboard
fun StylishBottomSheet(onDismiss: () -> Unit, modifier: Modifier = Modifier, skipPartiallyExpanded: Boolean = false, sheetState: SheetState = rememberModalBottomSheetState(
skipPartiallyExpanded = skipPartiallyExpanded,
), shape: Shape = RoundedCornerShape(
topStart = StylishTheme.dimensions.connectedCornerRadius,
topEnd = StylishTheme.dimensions.connectedCornerRadius,
), containerColor: Color = MaterialTheme.colorScheme.surface, contentColor: Color = MaterialTheme.colorScheme.onSurface, tonalElevation: Dp = 1.dp, scrimColor: Color = BottomSheetDefaults.ScrimColor, dragHandle: @Composable () -> Unit? = null, contentWindowInsets: @Composable () -> WindowInsets = { BottomSheetDefaults.windowInsets }, properties: ModalBottomSheetProperties = ModalBottomSheetProperties(), content: @Composable ColumnScope.() -> Unit)
A modal bottom sheet styled with the Stylish design language — rounded top corners from StylishTheme.dimensions.connectedCornerRadius and theme-aware container colors.
Link copied to clipboard
fun StylishCommandPalette(expanded: Boolean, onDismiss: () -> Unit, query: String, onQueryChange: (String) -> Unit, modifier: Modifier = Modifier, items: List<StylishCommandItem>, placeholder: String = "コマンドを入力…", maxResults: Int = 8, shape: Shape = RoundedCornerShape(DefaultStylishDimensions.connectedCornerRadius), containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, contentColor: Color = MaterialTheme.colorScheme.onSurface, width: Dp = 480.dp)
A searchable command palette — the web "Command/⌘K" pattern from shadcn/ui (cmdk) and Radix UI.
Link copied to clipboard
fun <T> StylishConnectedSegmentedControl(options: List<StylishSegmentedOption<T>>, selectedValue: T, onSelectedChange: (T) -> Unit, modifier: Modifier = Modifier, labelStyle: TextStyle = MaterialTheme.typography.labelLarge, labelMaxLines: Int = 1, labelOverflow: TextOverflow = TextOverflow.Ellipsis, selectedColors: ButtonColors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.primary,
contentColor = MaterialTheme.colorScheme.onPrimary,
), defaultColors: ButtonColors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.stylishComponentColors.groupedContainer,
contentColor = MaterialTheme.colorScheme.onSurface,
), spacing: Dp = StylishTheme.dimensions.connectedSpacing)
A connected segmented control for mutually exclusive selection among a small set of options.
Link copied to clipboard
fun StylishDeleteConfirmDialog(title: String, modifier: Modifier = Modifier, message: String, confirmLabel: String, cancelLabel: String, onConfirm: () -> Unit, onDismiss: () -> Unit, titleMaxLines: Int = Int.MAX_VALUE, titleOverflow: TextOverflow = TextOverflow.Ellipsis, titleStyle: TextStyle = MaterialTheme.typography.titleLarge, messageMaxLines: Int = Int.MAX_VALUE, messageOverflow: TextOverflow = TextOverflow.Ellipsis, messageStyle: TextStyle = MaterialTheme.typography.bodyMedium, messageColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, cancelColors: ButtonColors? = null, confirmColors: ButtonColors? = null, confirmEnabled: Boolean = true, cancelEnabled: Boolean = true, animate: Boolean = true, properties: DialogProperties = DialogProperties(usePlatformDefaultWidth = false))
A confirmation dialog for destructive delete operations.
Link copied to clipboard
fun StylishDialogActions(confirmLabel: String, cancelLabel: String, onConfirm: () -> Unit, onCancel: () -> Unit, modifier: Modifier = Modifier, cancelColors: ButtonColors? = null, confirmColors: ButtonColors? = null, spacing: Dp = StylishTheme.dimensions.connectedSpacing, confirmEnabled: Boolean = true, cancelEnabled: Boolean = true, cancelContent: @Composable () -> Unit? = null, confirmContent: @Composable () -> Unit? = null)
A confirm/cancel button row for the bottom of a dialog.
Link copied to clipboard
fun StylishDismissibleNavigationDrawer(drawerContent: @Composable ColumnScope.() -> Unit, modifier: Modifier = Modifier, drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed), gesturesEnabled: Boolean = true, shape: Shape = DrawerDefaults.shape, containerColor: Color = DrawerDefaults.standardContainerColor, contentColor: Color = contentColorFor(containerColor), tonalElevation: Dp = DrawerDefaults.DismissibleDrawerElevation, windowInsets: WindowInsets = DrawerDefaults.windowInsets, content: @Composable () -> Unit)
A dismissible navigation drawer with Stylish theme defaults, wrapping the Material 3 DismissibleNavigationDrawer.
Link copied to clipboard
fun StylishHoverCard(modifier: Modifier = Modifier, trigger: @Composable () -> Unit, shape: Shape = RoundedCornerShape(DefaultStylishDimensions.connectedCornerRadius), containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, contentColor: Color = MaterialTheme.colorScheme.onSurface, width: Dp = 320.dp, delayMillis: Int = 300, content: @Composable ColumnScope.() -> Unit)
A hover-triggered info card — the web "HoverCard" pattern from Radix UI and shadcn/ui.
Link copied to clipboard
fun StylishModalNavigationDrawer(drawerContent: @Composable ColumnScope.() -> Unit, modifier: Modifier = Modifier, drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed), gesturesEnabled: Boolean = true, shape: Shape = DrawerDefaults.shape, containerColor: Color = DrawerDefaults.modalContainerColor, contentColor: Color = contentColorFor(containerColor), tonalElevation: Dp = DrawerDefaults.ModalDrawerElevation, windowInsets: WindowInsets = DrawerDefaults.windowInsets, scrimColor: Color = DrawerDefaults.scrimColor, content: @Composable () -> Unit)
A modal navigation drawer with Stylish theme defaults, wrapping the Material 3 ModalNavigationDrawer.
Link copied to clipboard
fun StylishMultiChoiceSegmentedButtonRow(modifier: Modifier = Modifier, space: Dp = SegmentedButtonDefaults.BorderWidth, content: @Composable MultiChoiceSegmentedButtonRowScope.() -> Unit)
A row of multi-select segmented buttons, wrapping the Material 3 MultiChoiceSegmentedButtonRow with Stylish defaults.
Link copied to clipboard
fun StylishNavigationBar(items: List<StylishNavigationItem>, modifier: Modifier = Modifier, labelStyle: TextStyle = MaterialTheme.typography.labelSmall, iconSize: Dp = 24.dp, containerColor: Color = MaterialTheme.colorScheme.surfaceContainer, selectedContentColor: Color = MaterialTheme.colorScheme.primary, unselectedContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, disabledContentColor: Color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f), alwaysShowLabel: Boolean = true, labelMaxLines: Int = 1, labelOverflow: TextOverflow = TextOverflow.Ellipsis, windowInsets: WindowInsets = WindowInsets.navigationBars)
A bottom navigation bar that displays a row of StylishNavigationItem destinations. Each destination shows an icon, a label, and an optional badge. The selected destination is highlighted with an animated pill behind its icon and the primary content color.
Link copied to clipboard
fun StylishNavigationRail(modifier: Modifier = Modifier, containerColor: Color = NavigationRailDefaults.ContainerColor, contentColor: Color = contentColorFor(containerColor), header: @Composable ColumnScope.() -> Unit? = null, windowInsets: WindowInsets = NavigationRailDefaults.windowInsets, content: @Composable ColumnScope.() -> Unit)
A Material 3 navigation rail with Stylish theme defaults.
Link copied to clipboard
fun StylishNavigationRailItem(selected: Boolean, onClick: () -> Unit, icon: @Composable () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, label: @Composable () -> Unit? = null, alwaysShowLabel: Boolean = true, colors: NavigationRailItemColors = NavigationRailItemDefaults.colors(), interactionSource: MutableInteractionSource? = null)
A single destination inside StylishNavigationRail, wrapping the Material 3 NavigationRailItem with M3 default colors.
Link copied to clipboard
fun StylishPermanentNavigationDrawer(drawerContent: @Composable ColumnScope.() -> Unit, modifier: Modifier = Modifier, shape: Shape = DrawerDefaults.shape, containerColor: Color = DrawerDefaults.standardContainerColor, contentColor: Color = contentColorFor(containerColor), tonalElevation: Dp = DrawerDefaults.PermanentDrawerElevation, windowInsets: WindowInsets = DrawerDefaults.windowInsets, content: @Composable () -> Unit)
A permanent navigation drawer with Stylish theme defaults, wrapping the Material 3 PermanentNavigationDrawer.
Link copied to clipboard
fun StylishPopconfirm(expanded: Boolean, onExpandedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, anchor: @Composable () -> Unit, title: String, description: String? = null, confirmLabel: String = "OK", cancelLabel: String = "キャンセル", onConfirm: () -> Unit, onCancel: () -> Unit = {}, confirmColors: ButtonColors? = null, titleStyle: TextStyle = MaterialTheme.typography.titleSmall, descriptionStyle: TextStyle = MaterialTheme.typography.bodySmall, shape: Shape = RoundedCornerShape(DefaultStylishDimensions.connectedCornerRadius), width: Dp = 260.dp)
An inline confirmation anchored to a trigger — the web "Popconfirm" pattern from Ant Design.
Link copied to clipboard
fun StylishPopover(expanded: Boolean, onExpandedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, anchor: @Composable () -> Unit, shape: Shape = RoundedCornerShape(DefaultStylishDimensions.connectedCornerRadius), containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, contentColor: Color = MaterialTheme.colorScheme.onSurface, contentPadding: PaddingValues = PaddingValues(
horizontal = DefaultStylishDimensions.controlPadding,
vertical = DefaultStylishDimensions.controlVerticalPadding,
), tonalElevation: Dp = DefaultStylishDimensions.floatingElevation, offset: Dp = 8.dp, width: Dp = 280.dp, properties: PopupProperties = PopupProperties(focusable = true), content: @Composable ColumnScope.() -> Unit)
A popover — anchored floating content for arbitrary use (filters, calendars, help text) — the MUI Popover / Radix Popover counterpart.
Link copied to clipboard
fun StylishSearchBar(query: String, onQueryChange: (String) -> Unit, onSearch: (String) -> Unit, active: Boolean, onActiveChange: (Boolean) -> Unit, modifier: Modifier = Modifier, placeholder: @Composable () -> Unit? = null, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.connectedCornerRadius), colors: SearchBarColors = SearchBarDefaults.colors(
containerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
), content: @Composable ColumnScope.() -> Unit = {})
A search bar with a collapsed input field and an expanded results panel, wrapping the Material 3 SearchBar with Stylish defaults.
Link copied to clipboard
fun MultiChoiceSegmentedButtonRowScope.StylishSegmentedButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = SegmentedButtonDefaults.baseShape, colors: SegmentedButtonColors = SegmentedButtonDefaults.colors(), border: BorderStroke = BorderStroke(
width = SegmentedButtonDefaults.BorderWidth,
color = when {
enabled && checked -> colors.activeBorderColor
enabled -> colors.inactiveBorderColor
checked -> colors.disabledActiveBorderColor
else -> colors.disabledInactiveBorderColor
},
), contentPadding: PaddingValues = SegmentedButtonDefaults.ContentPadding, interactionSource: MutableInteractionSource? = null, icon: @Composable () -> Unit = { SegmentedButtonDefaults.Icon(checked) }, label: @Composable () -> Unit)
A single multi-select option inside StylishMultiChoiceSegmentedButtonRow, wrapping the Material 3 multi-choice androidx.compose.material3.SegmentedButton.
fun SingleChoiceSegmentedButtonRowScope.StylishSegmentedButton(selected: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = SegmentedButtonDefaults.baseShape, colors: SegmentedButtonColors = SegmentedButtonDefaults.colors(), border: BorderStroke = BorderStroke(
width = SegmentedButtonDefaults.BorderWidth,
color = when {
enabled && selected -> colors.activeBorderColor
enabled -> colors.inactiveBorderColor
selected -> colors.disabledActiveBorderColor
else -> colors.disabledInactiveBorderColor
},
), contentPadding: PaddingValues = SegmentedButtonDefaults.ContentPadding, interactionSource: MutableInteractionSource? = null, icon: @Composable () -> Unit = { SegmentedButtonDefaults.Icon(selected) }, label: @Composable () -> Unit)
A single mutually exclusive option inside StylishSingleChoiceSegmentedButtonRow, wrapping the Material 3 single-choice androidx.compose.material3.SegmentedButton.
Link copied to clipboard
fun StylishShortNavigationBar(modifier: Modifier = Modifier, containerColor: Color = ShortNavigationBarDefaults.containerColor, contentColor: Color = ShortNavigationBarDefaults.contentColor, windowInsets: WindowInsets = ShortNavigationBarDefaults.windowInsets, arrangement: ShortNavigationBarArrangement = ShortNavigationBarDefaults.arrangement, content: @Composable () -> Unit)
A Material 3 short navigation bar with Stylish theme defaults.
Link copied to clipboard
fun StylishShortNavigationBarItem(selected: Boolean, onClick: () -> Unit, icon: @Composable () -> Unit, label: @Composable () -> Unit? = null, modifier: Modifier = Modifier, enabled: Boolean = true, iconPosition: NavigationItemIconPosition = NavigationItemIconPosition.Top, colors: NavigationItemColors = ShortNavigationBarItemDefaults.colors(), interactionSource: MutableInteractionSource? = null)
A single destination inside StylishShortNavigationBar, wrapping the Material 3 ShortNavigationBarItem with M3 default colors.
Link copied to clipboard
fun StylishSingleChoiceSegmentedButtonRow(modifier: Modifier = Modifier, space: Dp = SegmentedButtonDefaults.BorderWidth, content: @Composable SingleChoiceSegmentedButtonRowScope.() -> Unit)
A row of mutually exclusive segmented buttons, wrapping the Material 3 SingleChoiceSegmentedButtonRow with Stylish defaults.
Link copied to clipboard
fun StylishTabBar(tabs: List<String>, selectedIndex: Int, onSelectedChange: (Int) -> Unit, modifier: Modifier = Modifier, tabIcons: List<ImageVector>? = null, leadingContents: List<@Composable () -> Unit?>? = null, labelStyle: TextStyle = MaterialTheme.typography.labelLarge, containerColor: Color = MaterialTheme.colorScheme.surfaceContainer, selectedContainerColor: Color? = null, selectedContentColor: Color? = null, unselectedContainerColor: Color? = null, unselectedContentColor: Color? = null, enabled: Boolean = true, scrollState: ScrollState = rememberScrollState())
A horizontally scrollable row of tab-like chips for switching between views within a page. Each tab is rendered as a StylishChip with animated selection, making this a lightweight alternative to StylishConnectedSegmentedControl when the number of tabs is dynamic or exceeds the screen width.